// a15、导入node.js中专门操作路径的模块
const path = require('path');

// b1、导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin');
// b2、创建html插件的实例对象；
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})

// d2；注意：左侧的 { } 是解构赋值
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');

const cleanPlugin = new CleanWebpackPlugin();

// a10、使用node.js的导出语法，向外导出一个webpack的配置对象
module.exports = {

    // mode 代表webpack运行的模式，可选值有 development 和 production
    mode: 'development',

    // e1、
    devtool: 'nosources-source-map',

    // a16、打包入口文件的路径entry
    entry: path.join(__dirname, './src/index.js'),
    // 输出
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'js/bundle.js', // 输出文件的名称
    },
    // d3，使用清除插件
    plugins: [htmlPlugin, cleanPlugin],
    devServer: {
        open: true, //
        host: '127.0.0.1',
        port: 7070,
    },
    // c7
    module: { // 所有第三方文件模块的匹配规则
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, { // c11
            test: /\.jpg|png|gif$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 500,
                    // 明确指定把打包生成的图片文件，存储到dist目录下的img文件夹中
                    outputPath: 'img',
                }
            }
        }, {
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        alias: {
            '@': path.join(__dirname, './src'),
        }
    }
}